<template>
  <div class="chart-wrapper" :class="size">
    <div class="chart-title" @click="toPage()"><span>{{ data && data.name }}</span></div>
    <div :id="chartId" class="chart"></div>
  </div>
</template>

<script>
import { option, xAxis, yAxis } from '@/constants/chartOptions'
const colorArray = [
  {
    top: '#ffa800', // 黄
    bottom: 'rgba(11,42,84,.3)'
  }, {
    top: '#1ace4a', // 绿
    bottom: 'rgba(11,42,84, 0.3)'
  },
  {
    top: '#4bf3ff', // 蓝
    bottom: 'rgba(11,42,84,.3)'
  }, {
    top: '#4f9aff', // 深蓝
    bottom: 'rgba(11,42,84,.3)'
  },
  {
    top: '#b250ff', // 粉
    bottom: 'rgba(11,42,84,.3)'
  }
]
export default {
  name: 'CommonChart',
  props: ['chartType', 'size', 'data'],
  data () {
    return {
      chartTypes: ['pie', 'line', 'bar'],
      chartId: 'chart-' + Math.floor(Math.random() * 1000000000),
      option: JSON.parse(JSON.stringify(option)),
      xAxis: JSON.parse(JSON.stringify(xAxis)),
      yAxis: JSON.parse(JSON.stringify(yAxis))
    }
  },
  mounted () {
    const self = this
    setTimeout(() => {
      if (this.chartTypes.includes(this.chartType)) {
        self.draw()
      }
    }, 1000)
  },
  methods: {
    draw () {
      if (this.data.series) {
        const myChart = this.$echarts.init(document.getElementById(this.chartId))
        const option = this.option
        option.grid = {
          left: '1%',
          top: '1%',
          right: '9%',
          bottom: '8%',
          containLabel: true
        }
        option.xAxis = {
          type: 'value',
          show: false,
          position: 'top',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            show: false
          }
        }
        option.yAxis = [{
          type: 'category',
          axisTick: {
            show: false,
            alignWithLabel: false,
            length: 5
          },
          splitLine: {
            show: false
          },
          inverse: 'true',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          data: ['鸡蛋牛肉面', '黑椒牛肉面', '土豆肥牛', '爆浆排骨肉盖浇饭', '红烧茄子盖浇饭']
        }]
        option.title.text = this.data.title
        if (this.data.titleOption) {
          option.title = Object.assign(option.title, this.data.titleOption)
        }
        option.series = this.data.series
        option.series.forEach((ele, index) => {
          ele.type = 'bar'
          ele.barGap = '0%'
          ele.barCategoryGap = '50%'
          delete ele.color
          ele.label = {
            normal: {
              show: true,
              position: 'right',
              formatter: '{c}',
              textStyle: {
                color: 'white'
              }
            }
          }
          ele.itemStyle = {
            normal: {
              show: true,
              color: function (params) {
                const num = colorArray.length
                return {
                  type: 'linear',
                  colorStops: [{
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  }, {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  }, {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  }, {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  }, {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  }, {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  }, {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  }, {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  }, {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  }, {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  }, {
                    offset: 0,
                    color: colorArray[params.dataIndex % num].bottom
                  }, {
                    offset: 1,
                    color: colorArray[params.dataIndex % num].top
                  }]
                }
              },
              barBorderRadius: 70,
              borderWidth: 0,
              borderColor: '#333'
            }
          }
        })
        myChart.setOption(option)
      }
    },
    toPage () {
      if (this.data && this.data.routeName) {
        this.$router.replace({
          name: this.data.routeName,
          query: this.data.query
        })
      }
    }
  },
  beforeDestroy () {
    const chart = document.getElementById(this.chartId)
    if (chart) {
      const parent = chart.parentNode
      if (parent) {
        parent.removeChild(chart)
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
